<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<style type="text/css">
*{margin: 0;padding:0;list-style: none;font-size: 12px;}
.notice{ width: 298px; height: 98px;margin: 10px; border: 1px solid #eee;overflow: hidden;}
.notice-tit{height: 27px;position: relative; background: #f7f7f7;}
.notice-tit ul{position: absolute; width: 301px;left: -1px;}
.notice-tit li{float: left;width: 58px; height: 26px;line-height: 26px;text-align: center;overflow: hidden;border-bottom:1px solid #eee;background: #fff;padding: 0 1px;background: #f7f7f7;}
.notice-tit li.select{background: #fff;border-bottom:1px solid #fff; border-left: 1px solid #eee; border-right: 1px solid #eee; padding: 0;font-weight: bold; }
.notice li a{text-decoration: none; color: #000;}
.notice li a:hover{ color: #f00;}
.notice-con .mod{margin: 10px 6px;}
.notice-con .mod li{float: left;width: 143px;height: 25px;overflow: hidden;}
</style>
<!-- <script src="script.js" type="text/javascript"></script> -->
<!-- <script src="script2.js" type="text/javascript"></script> -->
<!-- <script src="script3.js" type="text/javascript"></script> -->
<script src="script4.js" type="text/javascript"></script>
<!-- <script  src="script.js"></script> -->
</head>
<body>
    <div id="notice" class="notice">
        <div id="notice-tit" class="notice-tit">
            <ul>
                <li class="select"><a href="">公告</a></li>
                <li><a href="">规则</a></li>
                <li ><a href="">论坛</a></li>
                <li><a href="">安全</a></li>
                <li><a href="">公益</a></li>
            </ul>
        </div>
        <div id="notice-con" class="notice-con">
            <div class="mod" style="display: block">
                <ul>
                    <li><a href="">阿娇康师傅</a></li>
                    <li><a href="">仔细看救护车</a></li>
                    <li><a href="">套那就是快点放假</a></li>
                    <li><a href="">徐悲鸿就</a></li>
                </ul>
            </div>
            <div class="mod" style="display: none">
                <ul>
                    <li><span>[<a href="">通知</a>]</span><a href="">阿娇康师傅</a></li>
                    <li><span>[<a href="">通知</a>]</span><a href="">仔细看救护车</a></li>
                    <li><span>[<a href="">通知</a>]</span><a href="">套那就是快点放假</a></li>
                    <li><span>[<a href="">通知</a>]</span><a href="">徐悲鸿就</a></li>
                </ul>
            </div>
            <div class="mod" style="display: none">
                <ul>
                    <li><a href="">个人主要的太有</a></li>
                    <li><a href="">仔细看救护车</a></li>
                    <li><a href="">套那就是快点放假</a></li>
                    <li><a href="">徐悲鸿就</a></li>
                </ul>
            </div>
            <div class="mod" style="display: none">
                <ul>
                    <li><a href="">阿娇康师傅</a></li>
                    <li><a href="">交话费</a></li>
                    <li><a href="">套那就是快点放假</a></li>
                    <li><a href="">徐悲鸿就</a></li>
                </ul>
            </div>
            <div class="mod" style="display: none">
                <ul>
                    <li><a href="">莪哭提升好感</a></li>
                    <li><a href="">仔细看救护车</a></li>
                    <li><a href="">套那就是快点放假</a></li>
                    <li><a href="">徐悲鸿就</a></li>
                </ul>
            </div>
        </div>
    </div>

</body>
</html>